
<div class="toptitle"><label>标题修改：</label><input type="text" style="width:280px;color:#000000;" class="title_text" id="" value="新闻动态" name="" /></div>

<div class="tab-title">
	<ul>
		<li id="one1" onmousedown="setContentTab('one',1,5)" class="cur">返回图标</li>
		<li id="one2" onmousedown="setContentTab('one',2,5)">搜索图标</li>
		<li id="one3" onmousedown="setContentTab('one',3,5)">导航图标</li>
		<li id="one4" onmousedown="setContentTab('one',4,5)">背景颜色</li>
		<li id="one5" onmousedown="setContentTab('one',5,5)">背景图片</li>
	</ul>
</div>
<div class="tab-con">

	<div id="con_one_1" style="display:block;">
		
		<div class="iconbox clearfix" style="position:relative;">
			<div class="iconpic">
				<img src="images/arrow-yellow.png" />
				<div class="mask"></div>
				<a data-command="uplinks" class="uplinks" href="#">图标替换</a>
			</div>
			<div class="iconbtn">
				<a id="uploadBtnHolder" class="uploadbtn" href="javascript:;">上传替换</a>
				<div class="icontip"><b style="color:#ff6600;">图标尺寸：</b>（<span style="color:#3366cc;">40x40像素</span>）或（<span style="color:#3366cc;">正方形尺寸</span>）</div>
			</div>
			<div class="iconbar">
				<div class="progress-box" style="display:none;">
					<div class="progress-num">上传进度：<b>0%</b></div>
					<div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
				</div>
			</div>
			
			<div class="iconfloat" style="display: none;">
				<div class="iconmain">
					<h3>小乖乖</h3>
					<div class="iconlist">
						<table></table>
					</div>
					<span class="close"></span>
				</div>
				<div class="icontag">
					<div class="iconbgs" style="width: 414px; height: 37px; margin-top:-1px; overflow: hidden; position: relative;">
						<ul style="position: relative;"></ul>
					</div>
					<a class="disablad" id="tab-left"></a>
					<a id="tab-right"></a>
				</div>
			</div><!--iconfloat end-->
			
		</div><!--iconbox end-->
		
	</div>
	
	<div id="con_one_2" style="display:none;">
	
		<div class="iconbox clearfix" style="position:relative;">
			<div class="iconpic">
				<img src="images/icon-search640.png" />
				<div class="mask"></div>
				<a data-command="uplinks" class="uplinks" href="#">图标替换</a>
			</div>
			<div class="iconbtn">
				<a id="uploadBtnHolder2" class="uploadbtn" href="javascript:;">上传替换</a>
				<div class="icontip"><b style="color:#ff6600;">图标尺寸：</b>（<span style="color:#3366cc;">40x40像素</span>）或（<span style="color:#3366cc;">正方形尺寸</span>）</div>
			</div>
			<div class="iconbar">
				<div class="progress-box" style="display:none;">
					<div class="progress-num">上传进度：<b>0%</b></div>
					<div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
				</div>
			</div>
			
			<div class="iconfloat" style="display: none;">
				<div class="iconmain">
					<h3>小乖乖</h3>
					<div class="iconlist">
						<table></table>
					</div>
					<span class="close"></span>
				</div>
				<div class="icontag">
					<div class="iconbgs" style="width: 414px; height: 37px; margin-top:-1px; overflow: hidden; position: relative;">
						<ul style="position: relative;"></ul>
					</div>
					<a class="disablad" id="tab-left"></a>
					<a id="tab-right"></a>
				</div>
			</div><!--iconfloat end-->
			
		</div><!--iconbox end-->
		
	</div>
	
	<div id="con_one_3" style="display:none;">
	
		<div class="iconbox clearfix" style="position:relative;">
			<div class="iconpic">
				<img src="images/sdaf23456.png" />
				<div class="mask"></div>
				<a data-command="uplinks" class="uplinks" href="#">图标替换</a>
			</div>
			<div class="iconbtn">
				<a id="uploadBtnHolder3" class="uploadbtn" href="javascript:;">上传替换</a>
				<div class="icontip"><b style="color:#ff6600;">图标尺寸：</b>（<span style="color:#3366cc;">40x40像素</span>）或（<span style="color:#3366cc;">正方形尺寸</span>）</div>
			</div>
			<div class="iconbar">
				<div class="progress-box" style="display:none;">
					<div class="progress-num">上传进度：<b>0%</b></div>
					<div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
				</div>
			</div>
			
			<div class="iconfloat" style="display: none;">
				<div class="iconmain">
					<h3>小乖乖</h3>
					<div class="iconlist">
						<table></table>
					</div>
					<span class="close"></span>
				</div>
				<div class="icontag">
					<div class="iconbgs" style="width: 414px; height: 37px; margin-top:-1px; overflow: hidden; position: relative;">
						<ul style="position: relative;"></ul>
					</div>
					<a class="disablad" id="tab-left"></a>
					<a id="tab-right"></a>
				</div>
			</div><!--iconfloat end-->
			
		</div><!--iconbox end-->
		
	</div>
	
	<div id="con_one_4" style="display:none;">
	
		<div class="bodybg">
			<div class="clearfix">
				<select class="f-l" id="changebgcolor">
					<option value="top" selected="selected">顶部</option>
				</select>
				<span style="float:left;margin:15px 0 0 15px;"><input type="checkbox" id="color-or" /><label style="font-weight:800;color:#ff0000;" for="color-or"> 颜色透明</label></span>
			</div>
			<div id="colorpickerHolder"></div>
		</div>
		
	</div>
	
	<div id="con_one_5" style="display:none;">

		<div class="iconbox clearfix" style="position:relative;">
			<div class="iconpic">
				<img src="images/bg1.jpg" />
				<div class="mask"></div>
				<a data-command="uplinks" class="uplinks" href="#">背景替换</a>
			</div>
			<div class="iconbtn">
				<div class="f-l"><a id="uploadBtnHolder4" class="uploadbtn" href="javascript:;">上传替换</a></div>
				<div class="icontip" style="float:left;margin-left:15px;display:inline;"><b style="color:#ff6600;">注意：</b>上传图片大小&lt;1MB</div>
				<div class="iconlink">
					<span>
					背景设置：
					<select id="bg-sytle" name="">
						<option value="repeat">重复</option>
						<option value="no-repeat">不重复</option>
						<option value="repeat-y">纵向重复</option>
						<option value="repeat-x">横向重复</option>
					</select>
					<select id="bg-sytle-num" name="">
						<option value="0 0">左对齐</option>
						<option value="50% 0">居中对齐</option>
						<option value="100% 0">右对齐</option>
					</select>
					<input type="checkbox" id="bg-or" /><label style="font-weight:800;color:#ff0000;" for="bg-or"> 不显示背景图片</label>
					</span>
				</div>
			</div>
			<div class="iconbar">
				<div class="progress-box" style="display:none;">
					<div class="progress-num">上传进度：<b>0%</b></div>
					<div class="progress-bar"><div style="width:0%;" class="bar-line"></div></div>
				</div>
			</div>
			
			<div class="iconfloat" style="display: none;">
				<div class="iconmain">
					<h3>小乖乖</h3>
					<div class="iconlist">
						<table></table>
					</div>
					<span class="close"></span>
				</div>
				<div class="icontag">
					<div class="iconbgs" style="width: 414px; height: 37px; margin-top:-1px; overflow: hidden; position: relative;">
						<ul style="position: relative;"></ul>
					</div>
					<a class="disablad" id="tab-left"></a>
					<a id="tab-right"></a>
				</div>
			</div><!--iconfloat end-->
			
		</div><!--iconbox end-->
		
	</div>
	
	<div class="subbtn">
		<a class="btn-ok" href="javascript:;">保存</a>
		<a class="btn-cancel" href="javascript:;" onclick="closeDialog()">取消</a>
	</div>
	
</div>

<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var $targetSel = $("#changebgcolor");
	var getTarget = function() {
		var tarVal = $targetSel.val();
		if(tarVal == 'top') return '#header';
	}
	var $colorPicker = $('#colorpickerHolder').ColorPicker({
		flat:true,
		onChange:function(hsb, hex, rgb) {
			$(getTarget()).css('backgroundColor', '#' + hex);
		}
	});
	$targetSel.change(function() {
		var col = $(getTarget()).css('backgroundColor');
		if(col == 'transparent') col = '#ffffff';
		// ff rgb转换
		if(col.indexOf('rgb') != -1) {
			var _col = col.substring(4, col.length -1);
			var cArr = _col.split(', ');
			col = {
				r: cArr[0],
				g: cArr[1],
				b: cArr[2]
			}
		}
		$('#colorpickerHolder').ColorPickerSetColor(col);
	});
	
	$('.toptitle input').ColorPicker({
		color: '#000000',
		onShow: function (colpkr) {
			$(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
		onSubmit: function(hsb, hex, rgb, colpkr) {
			$(colpkr).ColorPickerHide();
		},
		onChange: function (hsb, hex, rgb) {
			$('.toptitle input').css('color', '#' + hex);
			$('.region h1').css('color', '#' + hex);
		}
	});
	
});

/**
 * 封装之后的方法，直接调用就可以了
 * 第一个是渲染的tab，第二个是要获取图标列表的url
 */
var initLoadIcons = function(render, url) {
	var iconsJson = new Array();
	render.find('a[data-command="uplinks"]').click(function(e) {
		e.stopPropagation();
		if(!!iconsJson) {
			loadIconsFn();
		}
		render.find('.iconfloat').show();
	});
	$('body').bind('click', function(e) {
		var target = $(e.target).parents('.iconfloat');
		if(target.length == 0) {
			render.find('.iconfloat').hide();
		}
	});
	render.find('.iconfloat .close').click(function() {
		render.find('.iconfloat').hide();
	});
	var loadIconsFn = function() {
		$.getJSON(url, function(json){
			iconsJson = json;
			var tagHtml = '';
			$.each(json, function(idx, val){
				if(idx == 0) {
					tagHtml += '<li class="cur"><img src="' + val.icon + '" /></li>';
					var iconHtml = '';
					$.each(val.items, function(jdx, jal){
						if(jdx == 0 || (jdx != 0 && jdx % 7 == 0)) {
							iconHtml += '<tr>';
						}
						iconHtml += '<td><img src="' + jal + '" /></td>';
						if(jdx == val.items.length - 1 || (jdx != 0 && (jdx + 1) % 7 == 0)) {
							iconHtml += '</tr>';
						}
					});
					render.find('.iconmain > h3').html(val.name);
					render.find('.iconmain table').html(iconHtml);
				
				} else {
					tagHtml += '<li><img src="' + val.icon + '" /></li>';
				}
			});
			render.find('.icontag ul').html(tagHtml);
			handleTab();
			bindIconsFn();
		});
	}

	var iconIndex_1 = 0;
	var handleTab = function() {
		iconIndex_1 = 0;
		
		var tagList = render.find('.icontag ul > li');
		tagList.each(function(idx, val) {
			var thisli = $(this);
			thisli.click(function() {
				if(thisli.hasClass('cur')) return;
				tagList.removeClass('cur');
				thisli.addClass('cur');
				listIcons(idx);
			});
		});
	
		var iconbgs = render.find('.icontag .iconbgs');
		var tabLeft = render.find('.icontag #tab-left');
		var tabRight = render.find('.icontag #tab-right');
		iconbgs.find('ul').css('marginLeft', 0);
		tabLeft.addClass('disablad');
		tabRight.removeClass('disablad');
	
		if(iconsJson.length < 9) {
			tabLeft.addClass('disablad');
			tabRight.addClass('disablad');
		}
	
		tabLeft.click(function() {
			tabMove('-');
		});
	
		tabRight.click(function() {
			tabMove('+');
		});
		var tabMove = function(type) {
			if('+' == type) {
				if(iconIndex_1 == iconsJson.length - 9) return;
				iconIndex_1++;
			}
			if('-' == type) {
				if(iconIndex_1 == 0) return;
				iconIndex_1--;
			}
			if(iconIndex_1 == iconsJson.length - 9) {
				tabRight.addClass('disablad');
			} else {
				tabRight.removeClass('disablad');
			}
			if(iconIndex_1 == 0) {
				tabLeft.addClass('disablad');
			} else {
				tabLeft.removeClass('disablad');
			}
			iconbgs.find('ul').css('marginLeft', -iconIndex_1 * 46);
		}
	}

	var listIcons = function(idx) {
		var val = iconsJson[idx];
		var iconHtml = '';
		$.each(val.items, function(jdx, jal){
			if(jdx == 0 || (jdx != 0 && jdx % 7 == 0)) {
				iconHtml += '<tr>';
			}
			iconHtml += '<td><img src="' + jal + '" /></td>';
			if(jdx == val.items.length - 1 || (jdx != 0 && (jdx + 1) % 7 == 0)) {
				iconHtml += '</tr>';
			}
		});
		render.find('.iconmain > h3').html(val.name);
		render.find('.iconmain table').html(iconHtml);
		bindIconsFn();
	}

	var bindIconsFn = function() {
		var iconsList = render.find('.iconmain').find('td');
		iconsList.click(function() {
			var thisimg = $(this).find('img').attr('src');
			render.find(".iconpic > img").attr('src', thisimg);
		});
	}
}
// 这里调用了4次，所有1，2，3，4都可以点了额
initLoadIcons($('#con_one_1'), 'ajax/icons.json');
initLoadIcons($('#con_one_2'), 'ajax/icons.json');
initLoadIcons($('#con_one_3'), 'ajax/icons.json');
initLoadIcons($('#con_one_5'), 'ajax/icons.json');

function updateProgress(progress, file) {
	progress.find('.progress-box .progress-bar > div').css('width', parseInt(file.percentUploaded) + '%');
	progress.find('.progress-box .progress-num > b').html(SWFUpload.speed.formatPercent(file.percentUploaded));
	if(parseInt(file.percentUploaded) == 100) {
		// 如果上传完成了
		progress.find('.progress-box').hide();
	}
}

function initProgress(progress) {
	progress.find('.progress-box').show();
	progress.find('.progress-box .progress-bar > div').css('width', '0%');
	progress.find('.progress-box .progress-num > b').html('0%');
}

function successAction(progress, fileInfo) {
	var up_path = fileInfo.path;
	var up_width = fileInfo.width;
	var up_height = fileInfo.height;
	progress.find(".iconpic > img").attr('src', up_path);
	progress.find('.progress-box').hide();
}

function successAction2(progress, fileInfo) {
	var up_path = fileInfo.path;
	var up_width = fileInfo.width;
	var up_height = fileInfo.height;
	progress.find(".iconpic > img").attr('src', up_path);
	progress.find('.progress-box').hide();
}

function successAction3(progress, fileInfo) {
	var up_path = fileInfo.path;
	var up_width = fileInfo.width;
	var up_height = fileInfo.height;
	progress.find(".iconpic > img").attr('src', up_path);
	progress.find('.progress-box').hide();
}
function successAction4(progress, fileInfo) {
	var up_path = fileInfo.path;
	var up_width = fileInfo.width;
	var up_height = fileInfo.height;
	progress.find(".iconpic > img").attr('src', up_path);
	progress.find('.progress-box').hide();
}

var swfImageUpload, progress = $('#con_one_1');
$(document).ready(function() {
	var settings = {
		flash_url : "js/plugin/swfupload/swfupload.swf",
		flash9_url : "js/plugin/swfupload/swfupload_fp9.swf",
		upload_url: "upload.php",// 接受上传的地址
		file_size_limit : "2 MB",// 文件大小限制
		file_types : "*.jpg;*.gif;*.png;*.jpeg;",// 限制文件类型
		file_types_description : "Image Files",// 说明，自己定义
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {},
		debug: false,
		// Button settings
		button_image_url: "js/plugin/swfupload/upload-btn.png",
		button_width: "143",
		button_height: "45 ",
		button_placeholder_id: 'uploadBtnHolder',
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor : SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		moving_average_history_size: 40,
		
		// The event handler functions are defined in handlers.js
		swfupload_preload_handler : preLoad,
		swfupload_load_failed_handler : loadFailed,
		file_queued_handler : fileQueued,
		file_dialog_complete_handler: fileDialogComplete,
		upload_start_handler : function (file) {
			initProgress(progress);
			updateProgress(progress, file);
		},
		upload_progress_handler : function(file, bytesComplete, bytesTotal) {
			updateProgress(progress, file);
		},
		upload_success_handler : function(file, data, response) {
			// 上传成功后处理函数
			var fileInfo = eval("(" + data + ")");
			successAction(progress, fileInfo);
		},
		upload_error_handler : function(file, errorCode, message) {
			alert('上传发生了错误！');
		},
		file_queue_error_handler : function(file, errorCode, message) {
			if(errorCode == -110) {
				alert('您选择的文件太大了。');	
			}
		}
	};
	swfImageUpload = new SWFUpload(settings);
});

var swfImageUpload2, progress2 = $('#con_one_2');
$(document).ready(function() {
	var settings = {
		flash_url : "js/plugin/swfupload/swfupload.swf",
		flash9_url : "js/plugin/swfupload/swfupload_fp9.swf",
		upload_url: "upload.php",// 接受上传的地址
		file_size_limit : "2 MB",// 文件大小限制
		file_types : "*.jpg;*.gif;*.png;*.jpeg;",// 限制文件类型
		file_types_description : "Image Files",// 说明，自己定义
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {},
		debug: false,
		// Button settings
		button_image_url: "js/plugin/swfupload/upload-btn.png",
		button_width: "143",
		button_height: "45 ",
		button_placeholder_id: 'uploadBtnHolder2',
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor : SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		moving_average_history_size: 40,
		
		// The event handler functions are defined in handlers.js
		swfupload_preload_handler : preLoad,
		swfupload_load_failed_handler : loadFailed,
		file_queued_handler : fileQueued,
		file_dialog_complete_handler: fileDialogComplete,
		upload_start_handler : function (file) {
			initProgress(progress2);
			updateProgress(progress2, file);
		},
		upload_progress_handler : function(file, bytesComplete, bytesTotal) {
			updateProgress(progress2, file);
		},
		upload_success_handler : function(file, data, response) {
			// 上传成功后处理函数
			var fileInfo = eval("(" + data + ")");
			successAction2(progress2, fileInfo);
		},
		upload_error_handler : function(file, errorCode, message) {
			alert('上传发生了错误！');
		},
		file_queue_error_handler : function(file, errorCode, message) {
			if(errorCode == -110) {
				alert('您选择的文件太大了。');	
			}
		}
	};
	swfImageUpload2 = new SWFUpload(settings);
});

var swfImageUpload3, progress3 = $('#con_one_3');
$(document).ready(function() {
	var settings = {
		flash_url : "js/plugin/swfupload/swfupload.swf",
		flash9_url : "js/plugin/swfupload/swfupload_fp9.swf",
		upload_url: "upload.php",// 接受上传的地址
		file_size_limit : "2 MB",// 文件大小限制
		file_types : "*.jpg;*.gif;*.png;*.jpeg;",// 限制文件类型
		file_types_description : "Image Files",// 说明，自己定义
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {},
		debug: false,
		// Button settings
		button_image_url: "js/plugin/swfupload/upload-btn.png",
		button_width: "143",
		button_height: "45 ",
		button_placeholder_id: 'uploadBtnHolder3',
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor : SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		moving_average_history_size: 40,
		
		// The event handler functions are defined in handlers.js
		swfupload_preload_handler : preLoad,
		swfupload_load_failed_handler : loadFailed,
		file_queued_handler : fileQueued,
		file_dialog_complete_handler: fileDialogComplete,
		upload_start_handler : function (file) {
			initProgress(progress3);
			updateProgress(progress3, file);
		},
		upload_progress_handler : function(file, bytesComplete, bytesTotal) {
			updateProgress(progress3, file);
		},
		upload_success_handler : function(file, data, response) {
			// 上传成功后处理函数
			var fileInfo = eval("(" + data + ")");
			successAction3(progress3, fileInfo);
		},
		upload_error_handler : function(file, errorCode, message) {
			alert('上传发生了错误！');
		},
		file_queue_error_handler : function(file, errorCode, message) {
			if(errorCode == -110) {
				alert('您选择的文件太大了。');	
			}
		}
	};
	swfImageUpload3 = new SWFUpload(settings);
});

var swfImageUpload4, progress4 = $('#con_one_4');
$(document).ready(function() {
	var settings = {
		flash_url : "js/plugin/swfupload/swfupload.swf",
		flash9_url : "js/plugin/swfupload/swfupload_fp9.swf",
		upload_url: "upload.php",// 接受上传的地址
		file_size_limit : "2 MB",// 文件大小限制
		file_types : "*.jpg;*.gif;*.png;*.jpeg;",// 限制文件类型
		file_types_description : "Image Files",// 说明，自己定义
		file_upload_limit : 100,
		file_queue_limit : 0,
		custom_settings : {},
		debug: false,
		// Button settings
		button_image_url: "js/plugin/swfupload/upload-btn.png",
		button_width: "143",
		button_height: "45 ",
		button_placeholder_id: 'uploadBtnHolder4',
		button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor : SWFUpload.CURSOR.HAND,
		button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
		
		moving_average_history_size: 40,
		
		// The event handler functions are defined in handlers.js
		swfupload_preload_handler : preLoad,
		swfupload_load_failed_handler : loadFailed,
		file_queued_handler : fileQueued,
		file_dialog_complete_handler: fileDialogComplete,
		upload_start_handler : function (file) {
			initProgress(progress4);
			updateProgress(progress4, file);
		},
		upload_progress_handler : function(file, bytesComplete, bytesTotal) {
			updateProgress(progress4, file);
		},
		upload_success_handler : function(file, data, response) {
			// 上传成功后处理函数
			var fileInfo = eval("(" + data + ")");
			successAction4(progress4, fileInfo);
		},
		upload_error_handler : function(file, errorCode, message) {
			alert('上传发生了错误！');
		},
		file_queue_error_handler : function(file, errorCode, message) {
			if(errorCode == -110) {
				alert('您选择的文件太大了。');	
			}
		}
	};
	swfImageUpload4 = new SWFUpload(settings);
});
</script>